<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <title>智能组卷系统</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
    <div class="app-container">
        <div class="box">
            <!-- 筛选器 -->
            <div class="filter-container" style="padding:10px 0 15px 900px;">
                <el-input placeholder="名称" v-model="pagination.selection" style="width: 200px;"
                          class="filter-item"></el-input>
                <el-button @click="handleSelect()" class="dalfBut">查询</el-button>
                <el-button @click="resetSelection()" class="dalfBut">重置</el-button>
            </div>

            <!-- 数据表格 -->
            <el-table size="small" current-row-key="id" min-row-height="40px" :data="paperList" border>
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column label="试卷名" align="center" width="600px">
                    <template slot-scope="scope">
                        <div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
                            {{scope.row.name }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="difficulty" label="设定难度" width="100px" align="center"></el-table-column>
                <el-table-column label="章节范围" width="150px" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.minChapter}}-{{ scope.row.minSection}}~{{ scope.row.maxChapter}}-{{
                        scope.row.maxSection}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button plain type="text" size="mini" @click="handleDetails(scope.row)">
                            试卷详情
                        </el-button>
                        <el-button plain type="text" size="mini" @click="handleLook(scope.row)" style="color: green;">
                            查看试题
                        </el-button>
                        <el-button plain type="text" size="mini" @click="handleExport(scope.row)">
                            导出试卷
                        </el-button>
                        <el-button plain type="text" size="mini" @click="handleDelete(scope.row)" style="color: red;">
                            删除试卷
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <div class="pagination-container">
                <el-pagination
                        class="pagination"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total,prev,pager,next,jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>

            <!-- 试题列表 -->
            <div class="container-box">
                <el-dialog title="试题列表" :visible.sync="questionsFormVisible" width="1040px"
                           :close-on-click-modal="false"
                           append-to-body
                >
                    <div class="el-dialog-div">
                        <el-table size="small" current-row-key="id" row-height="60px" :data="questionList" border>
                            <el-table-column type="index" align="center" min-width="50px" width="50px"
                                             label="题号"></el-table-column>
                            <el-table-column label="题干" align="center" min-width="200px">
                                <template slot-scope="scope">
                                    <div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
                                        {{scope.row.question }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="答案" align="center" min-width="150px">
                                <template slot-scope="scope">
                                    <div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
                                        {{scope.row.answer }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="score" label="分值" align="center" min-width="50px">
                                <template slot-scope="scope">
                                    {{ scope.row.score}}分
                                </template>
                            </el-table-column>
                            <el-table-column prop="type" label="类型" align="center"
                                             min-width="70px"></el-table-column>

                            <el-table-column prop="difficulty" label="难度" align="center"
                                             min-width="50px"></el-table-column>
                            <el-table-column prop="requirement" label="要求" align="center"
                                             min-width="50px"></el-table-column>

                            <el-table-column prop="knowledge" label="知识点" align="center"
                                             min-width="130px">
                                <template slot-scope="scope">
                                    <div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
                                        {{scope.row.knowledge}}
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" align="center" min-width="100px" width="100px">
                                <template slot-scope="scope">
                                    <el-button plain type="text" size="mini" @click="handleUpdate(scope.row)">
                                        查看详情
                                    </el-button>
                                    <!--                                    <el-button plain type="text" size="mini" @click="handleReplace(scope.row)"-->
                                    <!--                                               style="color: red;">-->
                                    <!--                                        替换-->
                                    <!--                                    </el-button>-->
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-dialog>

            </div>

            <!-- 试题详情-->
            <div class="add-form">
                <el-dialog title="试题内容" :visible.sync="editFormVisible">
                    <el-form ref="dataAddForm" :model="editFormData" label-position="right" :disabled="true">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="题干" label-width="100px">
                                    <el-input v-model="editFormData.question" type="textarea" :rows="4"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="答案" label-width="100px">
                                    <el-input v-model="editFormData.answer" type="textarea" :rows="4"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-dialog>
            </div>

            <!-- 详情弹窗 -->
            <div class="add-form">
                <el-dialog title="题型分值占比" :visible.sync="detailFormVisible"
                           :close-on-press-escape="false"
                           :close-on-click-modal="false">
                    <el-form ref="dataAddForm" :model="detailFormData" label-position="right" :disabled="true">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="难度系数" label-width="100px">
                                    <el-input v-model="detailFormData.difficulty" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="试卷总分" label-width="100px">
                                    <el-input v-model="detailFormData.totalScore" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>

                    <div ref="chart" style="width: 100%; height: 400px;"></div>
                </el-dialog>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios.min.js"></script>
<script src="/webjars/echarts/4.9.0/echarts.min.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            pagination: {
                currentPage: 1,  //当前页码
                pageSize: 10,    //每页记录
                total: 0,        //总记录
                selection: "",    //搜索框
            },
            paperList: [],//当前页要展示的列表数据
            questionList: [],//试题列表

            formData: {},//表单数据
            editFormData: {},//题目详情
            detailFormData:{
                difficulty:"",
                totalScore:"",
            },
            editFormVisible: false,//编辑表单是否可见
            detailFormVisible: false,
            questionsFormVisible: false,
        },

        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            const userInfo = window.localStorage.getItem('userInfo')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            this.getAll();
        },

        methods: {
            getAll() {
                param = "?author=" + this.userInfo.username;
                param += "&name=" + this.pagination.selection;
                console.log(param);
                axios.get("/paper/" + this.pagination.currentPage + "/" + this.pagination.pageSize + param).then((res) => {
                    this.pagination.pageSize = res.data.data.size;
                    this.pagination.currentPage = res.data.data.current;
                    this.pagination.total = res.data.data.total;
                    this.paperList = res.data.data.records;
                });
            },

            //搜索
            handleSelect() {
                this.getAll();
            },

            //重置搜索框
            resetSelection() {
                this.pagination.selection = "";
                this.getAll();
            },

            //分页
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.getAll()
            },

            // 删除
            handleDelete(row) {
                this.$confirm("此操作永久删除当前数据，是否继续？", "提示", {
                    type: 'info'
                }).then(() => {
                    axios.delete("/paper/" + row.id).then((res) => {
                        if (res.data.code === 20020) {
                            this.$message.success("删除成功");
                        } else {
                            this.$message.error("删除失败");
                        }
                    }).finally(() => {
                        this.getAll();
                    });
                }).catch(() => {
                    this.$message.info("取消删除操作");
                });
            },

            //查看
            handleUpdate(row) {
                axios.get("/questions/" + row.id).then((res) => {
                    if (res.data.code === 20040) {
                        this.editFormData = res.data.data;
                        this.editFormVisible = true;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },

            handleDetails(row) {
                axios.get("/paper/ques/" + row.id).then((r) => {
                    this.questionList = r.data.data;
                    let postData = {
                        formData: row,
                        dataList: this.questionList
                    }
                    console.log(row)
                    console.log(this.questionList)
                    axios.post("/paper/details", postData).then((res) => {
                        console.log(res)
                        if (res.data.code === 20040) {
                            this.$message.success("操作成功");
                            this.detailFormVisible = true;

                            // 处理数据
                            const data = [];
                            for(let key in res.data.data) {
                                if(key !== "difficulty" && key !== "totalScore") {
                                    data.push({
                                        name: key,
                                        value: res.data.data[key],
                                    });
                                }
                                else if(key === "difficulty"){
                                    this.detailFormData.difficulty = res.data.data[key ]
                                }else{
                                    this.detailFormData.totalScore = res.data.data[key ]
                                }
                            }
                            // 绘制饼状图
                            this.$nextTick(() => {
                                console.log(this.$refs.chart)
                                this.chartData = echarts.init(this.$refs.chart);
                                this.chartData.setOption({
                                    series: [{
                                        name: '章节题型占比',
                                        type: 'pie',
                                        radius: '55%',
                                        center: ['50%', '50%'],
                                        label: {
                                            formatter: '{b}: {d}%'
                                        },
                                        data: data
                                    }]
                                });
                            });
                        } else {
                            this.$message.error("操作失败");
                        }
                    });
                });
            },

            handleLook(row) {
                axios.get("/paper/ques/" + row.id).then((res) => {
                    this.questionList = res.data.data;
                    this.questionsFormVisible = true;
                });

            },

            getQuestions(row) {
                axios.get("/paper/ques/" + row.id).then((res) => {
                    this.questionList = res.data.data;
                });
            },

            handleExport(row) {
                axios.get("/paper/ques/" + row.id).then((res) => {
                    this.questionList = res.data.data;
                    let postData = {
                        formData: row,
                        dataList: this.questionList
                    }
                    axios.post("/paper/export", postData).then((res) => {
                        if (res.data.code === 30030) {

                            this.$message.success(res.data.msg);
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                });
            },

        }
    })
</script>
</html>